<template>
  <div style="padding: 20px;height: 670px">
    <t-card style="height: 670px">
      <div class="buttonHeader">
        <t-button theme="primary" size="large" @click="show=true">新增助手</t-button>
        &nbsp;
        <t-button theme="primary" size="large" variant="outline">批量删除</t-button>
      </div>
      <el-table :data="helpItemList" style="width: 100%;padding-left: 300px" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column label="类型" width="180" :filters="getFilterName()" :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.help.helpType == 1">小区民警</el-tag>
            <el-tag v-if="scope.row.help.helpType == 2">周边商铺</el-tag>
            <el-tag v-if="scope.row.help.helpType == 3">家政服务</el-tag>
            <el-tag v-if="scope.row.help.helpType == 4">政务电话</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="itemName" label="名称" width="180">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="名称">
                <span>{{ props.row.itemName }}</span>
              </el-form-item>
              <el-form-item label="联系电话">
                <span>{{ props.row.itemPhone }}</span>
              </el-form-item>
              <el-form-item label="联系地址">
                <span>{{ props.row.itemPlace }}</span>
              </el-form-item>
              <el-form-item label="简介">
                <span>{{ props.row.itemBrief }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <el-tag>{{ convertItem(props.row.itemStatus) }}</el-tag>
                <!-- <el-tag v-if="props.row.itemStatus == 1">正常</el-tag>
                <el-tag v-if="props.row.itemStatus == 2">不正常</el-tag> -->
              </el-form-item>
              <el-form-item label="图片">
                <span>{{ props.row.itemPic }}</span>
              </el-form-item>
            </el-form>
            <div class="form-in-button">
              <t-button size="mini" theme="primary" @click="handleEdit(props.$index, props.row, props)">编辑</t-button>
              &nbsp;
              <t-button size="mini" theme="primary" variant="outline" @click="handleDelete(props.$index, props.row)">删除</t-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="新增便民助手" :visible.sync="show" :width="680">
        <el-form :model="addItem">
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select v-model="addItem.helpId" placeholder="请选择">
              <el-option v-for="help in helpList" :key="help.helpId" :label="convertType(help.helpType)"
                         :value="help.helpId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="addItem.itemName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input v-model="addItem.itemPhone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系地址" :label-width="formLabelWidth">
            <t-button size="small" theme="primary" @click="getMap()">选择地址</t-button>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <!-- <el-input v-model="item.itemStatus" autocomplete="off"></el-input> -->
            <el-select v-model="addItem.itemStatus" placeholder="请选择">
              <el-option v-for="status in statusList" :key="status.value" :label="status.label"
                         :value="status.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action=""
                       :on-success="onSuccess" :on-remove="handleRemove" :file-list="updateList" :on-change="onChange"
                       list-type="picture">
              <t-button size="small" theme="primary">点击上传</t-button>
              <div slot="tip" class="el-upload__tip">只能上传一个jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <!-- <el-input v-model="item.itemBrief" autocomplete="off"></el-input> -->
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="addItem.itemBrief">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <t-button theme="primary" variant="outline" @click="cancalAdd">取 消</t-button>
          &nbsp;
          <t-button theme="primary" @click="handledAdd">确 定</t-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑便民助手" :visible.sync="dialogFormVisible" :width="680">
        <el-form :model="item">
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select v-model="item.helpId" placeholder="请选择">
              <el-option v-for="help in helpList" :key="help.helpId" :label="convertType(help.helpType)"
                         :value="help.helpId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="item.itemName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input v-model="item.itemPhone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系地址" :label-width="formLabelWidth">
            <a href="#" @click="getMap()">{{ item.itemPlace }}</a>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <!-- <el-input v-model="item.itemStatus" autocomplete="off"></el-input> -->
            <el-select v-model="item.itemStatus" placeholder="请选择">
              <el-option v-for="status in statusList" :key="status.value" :label="status.label"
                         :value="status.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action=""
                       :on-success="onSuccess" :on-remove="handleRemove" :file-list="updateList" :on-change="onChange"
                       list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传一个jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth">
            <!-- <el-input v-model="item.itemBrief" autocomplete="off"></el-input> -->
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.itemBrief">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancalUpdate">取 消</el-button>
          <el-button type="primary" @click="handleUpdate()">更 新</el-button>
        </div>
      </el-dialog>


      <t-dialog header="地图" :visible.sync="showMap" width="70%" :append-to-body="true" @closed="mapClose"
                style="height: 90%; overflow: hidden;" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-input class="addressInput" v-model="addressKeyword" placeholder="请输入地址来查找相关位置"></el-input>
        <br/>
        <div></div>
        <br/>
        <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:500px" @click="getClickInfo"
                   :scroll-wheel-zoom='true' v-loading='loadingMap'>
          <bm-view style="width: 100%; height:400px; flex: 1"></bm-view>
          <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: block"></bm-local-search>
        </baidu-map>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="checkedAddress">确 定</el-button>
          <el-button @click="mapClose">关 闭</el-button>
        </div>
      </t-dialog>

    </t-card>
  </div>
</template>

<script>

import axios from "axios";
import {MessagePlugin} from "tdesign-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "assistant",
  data() {
    return {
      show: false,
      helpList: [],
      helpItemList: [],
      addItem: {},
      item: {},
      statusList: [{
        value: "1",
        label: "正常"
      }, {
        value: "2",
        label: "不正常"
      }],
      updateList: [],

      dialogFormVisible: false,
      formLabelWidth: "120px",

      loadingMap: true,
      BMap: '',
      map: '',
      geoc: '',
      showMap: false,
      addressKeyword: '',
      pointLngLat: '',
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13,
      currentAddress: {},
    }
  },
  mounted() {
    this.getAllList();
    this.getHelpList()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getAllList() {
      axios.get("/api/admin/help/list")
          .then(res => {
            if (res.data.code === 200) {
              // this.helpVOList = res.data.data;
              this.helpItemList = res.data.data;
              // console.log(this.helpItemList)
            }
          })
    },
    getHelpList() {
      axios.get("/api/admin/help/helplist")
          .then(res => {
            if (res.data.code === 200) {
              // console.log("进俩了")
              this.helpList = res.data.data;
              // console.log(this.helpList)
            }
          })
    },
    getFilterName() {
      let apiArr = [];
      this.helpList.forEach(k => {
        let type = this.convertType(k.helpType);
        apiArr.push({text: type, value: k.helpId})
      })
      return apiArr; // return返回去
    },
    filterHandler(value, row) {
      return row.help.helpId === value;
    },
    convertType(type) {
      let newType = "未知";
      if (type == "1") {
        newType = "小区民警"
      } else if (type == "2") {
        newType = "周边商铺"
      } else if (type == "3") {
        newType = "家政服务"
      } else if (type == "4") {
        newType = "政务电话"
      }
      return newType;

    },
    convertItem(status) {
      let newStatus = "未知";
      if (status == "1") {
        newStatus = "正常"
      } else if (status == "2") {
        newStatus = "不正常"
      }
      return newStatus;
    },
    // 地图初始化
    handler({BMap, map}) {
      this.mapOpen()
      this.BMap = BMap
      this.map = map
      this.loadingMap = true
      var geolocation = new BMap.Geolocation()
      this.geoc = new BMap.Geocoder() // 地址解析对象
      var $this = this
      // 调用百度地图api 中的获取当前位置接口
      geolocation.getCurrentPosition(function (r) {
        let myGeo = new BMap.Geocoder()
        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
          if (result) {
            $this.loadingMap = false
            console.log(result)
            $this.$set($this, 'pointLngLat', {lng: result.point.lng, lat: result.point.lat})
            map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
            $this.addPoint({BMap, map})
          }
        })
      })
    },
    // 添加点位
    addPoint({BMap, map}) {
      console.log("addPoint")
      map.clearOverlays()
      var point = new BMap.Point(this.pointLngLat.lng, this.pointLngLat.lat)
      let zoom = map.getZoom()
      console.log('zoom:' + zoom)
      setTimeout(() => {
        map.centerAndZoom(point, zoom)
      }, 0)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
    },
    // 点击地图
    getClickInfo(e) {
      // console.log(e)
      this.center = {lng: e.point.lng, lat: e.point.lat}
      this.pointLngLat = {lng: e.point.lng, lat: e.point.lat}
      // 获取点位信息
      let $this = this
      this.geoc.getLocation(e.point, function (rs) {
        // console.log(e.point)
        // var addComp = rs.addressComponents
        // console.log("addComp"+JSON.stringify(addComp))
        // console.log("rs:"+JSON.stringify(rs.surroundingPois[0].address))
        // $this.pointAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
        $this.currentAddress = rs.surroundingPois[0].address;
        console.log($this.currentAddress)
      })
    },
    // 地图相关
    mapOpen() {
      console.log("mapOpen")
      this.top = this.getScrollTop()
      if (this.top) {
        this.setScrollTop(0)
      }
    },
    // 关闭地图后调用
    mapClose() {
      console.log("mapClose")
      this.setScrollTop(this.top)
      this.top = 0
      this.showMap = false
    },
    getScrollTop() {
      console.log("getScrollTop")
      let scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }
      return scrollTop
    },
    setScrollTop(top) {
      console.log("setScrollTop")
      if (!isNaN(top)) {
        if (document.documentElement && document.documentElement.scrollTop !== undefined) {
          document.documentElement.scrollTop = top
        } else if (document.body) {
          document.body.scrollTop = top
        }
      }
    },
    //地图确定按钮
    checkedAddress() {
      console.log(JSON.stringify(this.currentAddress))
      this.item.itemPlace = this.currentAddress;
      this.showMap = false;
    },
    //处理编辑
    handleEdit(index, row, props) {
      console.log(index)
      console.log(row)
      console.log(props)
      this.item = row;
      this.dialogFormVisible = true

    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    cancalUpdate() {
      this.dialogFormVisible = false;
      // this.item = {};
    },
    cancalAdd() {
      this.show = false;
      // this.item = {};
    },
    handledAdd() {
      this.show = false;
      this.item = {};
    },
    handleUpdate() {
      axios.post("/api/admin/help/update", this.item)
          .then(res => {
            if (res.data.code === 200) {
              MessagePlugin.success('成功')
            }
            this.$router.go("/assistant")
          })
    },
    getMap() {
      this.addressKeyword = this.item.itemPlace;
      this.showMap = true
    },
    onSuccess() {

    },
    handleRemove() {

    },
    onChange() {

    }

  }
}
</script>

<style>
.form-in-button {
  margin: 20px 50px 20px 50px;

}

.buttonHeader {
  margin: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
  margin-left: 50px;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

/* 给个宽高 */
.bm-view {
  height: 400px;
  width: 700px;
}

.input-with-select {
  width: 400px;
  margin-bottom: 5px;
}

.search {
  height: 300px;
  overflow: auto;
}
</style>